import React, { Component } from 'react'
import {Map,Marker}         from 'react-amap'
import {connect}            from 'react-redux'
import Han                  from "../../components"
const {Header,Button,Input,Text} = Han;
export default connect(store=>{
    const {my} = store;
    return {
        my
    }
})(class DetailMap extends Component {
    state={
        appointmentPhone:'',
        appointmentTime:'',
        num:'',
    }
    submit=()=>{
        const {appointmentPhone,appointmentTime,num} = this.state;
        const {$httpReq,$api} = this;
        let submitData = {
            user:localStorage.user,
            shopID:localStorage.shopID,
            appointmentPhone,
            appointmentTime,
            num
        }
       
        $httpReq($api.ORDER_ADD({submitData}),res=>{
            alert('提交成功')
            this.props.history.push("/record/0")
        })

    }
    render() {
        const {shopName,address,longitude,latitude,star,shopID} = this.props.location.state;
        const {name,sex,cardType,card,birthDay} = this.props.my;
        const {appointmentPhone,appointmentTime,num} = this.state
        return (
            <div className="buy">

                <Header title="口罩预约购买" path="/storesearch"/>

                {/* 预约购买须知 */}
                <div className="buy_known">
                    <div className="buy_known_title">预约购买须知：</div>
                    <p>1.本平台用户需完善个人信息后进行预约</p>
                    <p>2.当日可预约到店时间为门店营业时间开业后。</p>
                    <p>3.同一门店在同一时间内只可预约一次。</p>
                    <p>4.如果您需要取消预约，需要提前一个小时。</p>
                </div>

                {/* 门店地址 */}
                <div className="han_type_fff">门店信息</div>
                <div className="buy_shop">
                    <div className="buy_shop_name" >
                        <span className="buy_shop_name_title">{shopName}</span>
                        {
                            Array.from(new Array(5).keys()).map(jtem=><span key={jtem} className={["iconfont",star>jtem?"icon-favorites-fill":"icon-favorites"].join(' ')}></span>)
                        }
                    </div>
                    
                    <div className="buy_map">
                        <Map 
                        zoom={15}
                        amapkey="35b6b848c7b0d98e04d8de22ab3e9f95"
                        center={{longitude,latitude}}
                        >
                            <Marker position={{longitude,latitude}}></Marker>
                        </Map>
                    </div>
                    <div className="buy_shop_name_address" >{address}</div>
                </div>

                {/* 用户信息 */}
                <div className="han_type_fff">个人信息</div>
                <div className="buy_person_message">
                    <Text label="姓名" value={name}/>
                    <Text label="性别" value={sex}/>
                    <Text label="证件类型" value={cardType}/>
                    <Text label="证件号" value={card}/>
                    <Text label="出生日期" value={birthDay}/>
                </div>

                {/* 预约信息 */}
                <div className="han_type_fff">预约信息</div>
                <div className="buy_person_message">
                    <Input label="手机号" value={appointmentPhone} change={appointmentPhone=>this.setState({appointmentPhone})}/>
                    <Input label="到店时间" value={appointmentTime} change={appointmentTime=>this.setState({appointmentTime})}/>
                    <Input label="购买数量" value={num} change={num=>this.setState({num})}/>
                </div>
               
                <div className="readed">
                    <input type="checkbox"/>我已阅读并同意预约登记规则
                </div>

                <Button text="提交" submit={this.submit} />
            </div>
        )
    }
})
